<template>
	<view class="content">
		<!-- #ifdef MP-WEIXIN -->
		<view class="nav">
			<view class="iconfont icon-magnifier">

			</view>
			<text>百年奥莱</text>
			<view class="iconfont icon-xiaoxi">
			</view>
		</view>
		<!-- #endif -->
		<!-- tabBar导航 -->
		<scroll-view class="scroll" :scroll-into-view="scrollIntoIndex" scroll-x="true">
			<view :id="'top'+index" class="scrollItem" v-for="(item,index) in tabBarData" :key="item.id"><text
					@click="clickActive(index)" :class="{fActiveColor:activeIndex===index}">{{item.name}}</text>
			</view>
		</scroll-view>

		<swiper :style="'height:'+viewH+'px;'" @change="swiperChange" :current="activeIndex" :interval="3000"
			:duration="1000">
			<swiper-item v-for="(k,i) in contentData" :key="i">
				<scroll-view scroll-y="true" :style="'height:'+viewH+'px;'">
					<block v-if="k.data.length>0">
						<block v-for="(ke,va) in k.data" :key="va">
							<!-- 为您推荐 -->
							<index-swiper v-if="ke.type==='swiperList'" :indexSwiperData="ke.data"></index-swiper>
							<template v-if="ke.type==='recommendList'">

								<recommend :recommendData="ke.data"></recommend>
								<Card>猜你喜欢</Card>
							</template>
							<!-- 	运动户外....-->
							<Banner v-if='ke.type==="bannerList"' :dataList='ke.imgUrl'></Banner>

							<template v-if='ke.type==="iconsList"'>
								<Icons :dataList='ke.data'></Icons>
								<Card>热销爆品</Card>
							</template>

							<template v-if='ke.type==="hotList"'>
								<Hot :dataList='ke.data'></Hot>
								<Card>推荐店铺</Card>
							</template>

							<template v-if='ke.type==="shopList"'>
								<Shop :dataList='ke.data'></Shop>
								<Card>为您推荐</Card>
							</template>
							<CommodityList v-if="ke.type==='commodityList'" :commodityList="ke.data"></CommodityList>
						</block>
					</block>
					<view v-else>
						暂无数据...
					</view>
				</scroll-view>




			</swiper-item>

		</swiper>


		<!-- 其他模板
			<Banner></Banner> -->
		<!-- 	<Icons></Icons>
		<Card>热销爆品</Card>
		<hot></hot>
		<Card>推荐店铺</Card>
		<Shop></Shop>
		<Card>为您推荐</Card>
		<CommodityList></CommodityList> -->


	</view>
</template>

<script>
	import indexSwiper from '@/components/index/index-swiper.vue'
	import recommend from '@/components/index/recommend.vue'
	import Card from '@/components/common/Card.vue'
	import CommodityList from '@/components/common/CommodityList.vue'
	import Banner from '../../components/index/Banner.vue'
	import Icons from '../../components/index/Icons.vue'
	import Hot from '../../components/index/Hot.vue'
	import Shop from '../../components/index/Shop.vue'
	import {
		log
	} from 'util'
	export default {
		components: {
			indexSwiper,
			recommend,
			Card,
			CommodityList,
			Banner,
			Icons,
			Hot,
			Shop
		},
		data() {
			return {
				tabBarData: [],
				//选中的索引
				activeIndex: 0,
				//顶栏跟随的索引id值
				scrollIntoIndex: "top0",
				viewH: '',
				contentData: []
			}
		},
		onLoad() {
			this.getData()
		},
		onReady() {
			uni.getSystemInfo({
				success: (res) => {
					this.viewH = res.windowHeight

				}
			})
		},
		methods: {
			clickActive(index) {
				this.activeIndex = index
				this.scrollIntoIndex = "top" + index

				//每一次滑动==》赋值first
				if (this.contentData[this.activeIndex].load === 'first') {
					this.getChangeData(index);
				}
			},
			swiperChange(e) {
				this.clickActive(e.detail.current)
			},
			getData() {
				uni.request({
					url: 'http://192.168.3.34:3000/api/index_list/data',
					success: (res) => {
						this.tabBarData = res.data.data.topBar
						this.contentData = this.initData(res.data.data)
					}
				})
			},
			getChangeData(index) {
				uni.request({
					url: 'http://192.168.3.34:3000/api/index_list/' + this.tabBarData[index].id + '/data/1',
					success: (res) => {
						if (res.statusCode != 200) {
							return
						} else {
							let data = res.data.data;
							this.contentData[index].data = [...this.contentData[index].data, ...data]
						}

					}
				})
				this.contentData[index].load = 'last';
			},
			initData(res) {
				let arr = [];
				for (let i = 0; i < this.tabBarData.length; i++) {
					let obj = {
						data: [],
						load: "first"
					}
					//获取首次数据
					if (i == 0) {
						obj.data = res.data;
					}
					arr.push(obj)
				}
				return arr;
			},
			// 封装兼容方法
			getClientHeight() {
				const res = uni.getSystemInfoSync();
				const system = res.platform;
				if (system === 'ios') {
					return 44 + res.statusBarHeight;
				} else if (system === 'android') {
					return 48 + res.statusBarHeight;
				} else {
					return 0;
				}

			}
		}
	}
</script>

<style scoped>
	.nav {
		height: 200rpx;
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.iconfont {
		font-size: 45rpx;
	}

	.scroll {
		white-space: nowrap;
		width: 100%;
		height: 80rpx;
	}

	.scrollItem {
		padding: 10rpx 30rpx;
		display: inline-block;
		font-size: 32rpx;

	}

	.fActiveColor {
		color: #49BDFB;
		border-bottom: 6rpx solid #49BDFB;
		padding: 10rpx 0;


	}
</style>